<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考研英语翻译</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap-icons.css">
    <style>
        body {
            background-color: #f0f9f9;
        }
        .header {
            padding: 15px;
            background: white;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .translation-content {
            padding: 20px;
            background: white;
            margin: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .english-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
            color: #333;
        }
        .translation-tools {
            position: sticky;
            bottom: 0;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .translation-area {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .translation-area.show {
            display: block;
        }
        .reference-translation {
            color: #28a745;
        }
        .key-points {
            color: #dc3545;
        }
        .word-note {
            color: #0066cc;
            cursor: pointer;
            text-decoration: underline dotted;
        }
        .sentence-structure {
            color: #6c757d;
            font-style: italic;
        }
        .toggle-btn {
            padding: 8px 20px;
            border-radius: 20px;
            margin: 0 5px;
            border: none;
            background: #f0f0f0;
            color: #666;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s;
        }
        .toggle-btn.active {
            background: #40e0d0;
            color: white;
        }
        .toggle-btn.speaking {
            background: #ff4444;
            color: white;
            animation: pulse 1s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .bi-mic-fill {
            font-size: 1.1em;
        }
        /* 添加翻译显示区域的样式 */
        .translation-display {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #40e0d0;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
        <a href="english-exam.html" class="text-dark">
            <i class="bi bi-chevron-left fs-4"></i>
        </a>
        <h5 class="mb-0 mx-auto">2022年 翻译</h5>
    </div>

    <!-- 翻译内容 -->
    <div class="translation-content">
        <div class="english-text">
            The supermarket is designed to attract consumers. The moment you walk in, you are greeted by the sight and 
            smell of fresh flowers, bread and fruit—all items that appeal to the senses and make you feel good. 
            Supermarkets also play relaxing music, as research shows that this encourages shoppers to take their time, 
            and the longer people stay in a store, the more they are likely to spend.
        </div>
        
        <div class="translation-area">
            <h6 class="mb-3">参考译文：</h6>
            <div class="reference-translation mb-4">
                超市的设计就是为了吸引消费者。一走进超市，映入眼帘的就是新鲜的花卉、面包和水果，闻到的也是这些物品的香味——这些都是诱人感官、令人愉悦的商品。超市还会播放轻松的音乐，因为研究表明这样能让购物者放慢脚步，而人们在商店停留的时间越长，消费的可能性就越大。
            </div>

            <h6 class="mb-3">重点词汇：</h6>
            <ul class="mb-4">
                <li><span class="word-note">be greeted by</span> - 映入眼帘；受到...的迎接</li>
                <li><span class="word-note">appeal to</span> - 吸引；诱人</li>
                <li><span class="word-note">take their time</span> - 放慢脚步；从容行事</li>
            </ul>

            <h6 class="mb-3">句式分析：</h6>
            <div class="sentence-structure mb-4">
                1. The moment you walk in... - 时间状语从句，表示"一...就..."<br>
                2. the longer..., the more... - "越...越..."结构
            </div>

            <h6 class="mb-3">翻译技巧：</h6>
            <div class="key-points">
                1. 将被动语态"be designed to"转换为主动表达<br>
                2. 意译"appeal to the senses"为"诱人感官"<br>
                3. 将并列结构转化为汉语的递进关系
            </div>
        </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="translation-tools">
        <div class="d-flex justify-content-center">
            <button class="toggle-btn" id="readTranslation">
                <i class="bi bi-mic-fill"></i> 长按读出翻译
            </button>
            <button class="toggle-btn" id="aiAnalysis">
                <i class="bi bi-robot"></i> AI解析
            </button>
        </div>
    </div>

    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let translationVisible = false;
            
            $('#showTranslation, #showAnalysis').click(function() {
                $(this).toggleClass('active');
                translationVisible = !translationVisible;
                
                if (translationVisible) {
                    $('.translation-area').addClass('show');
                    $(this).text('隐藏解析');
                } else {
                    $('.translation-area').removeClass('show');
                    $(this).text($(this).attr('id') === 'showTranslation' ? '显示译文' : '显示解析');
                }
            });

            // 词汇注释点击效果
            $('.word-note').click(function() {
                // 这里可以添加显示详细释义的逻辑
                alert('显示词汇详细释义');
            });

            // 添加长按读出翻译功能
            let pressTimer;
            let isSpeaking = false;
            const $readBtn = $('#readTranslation');
            
            // 开始长按
            $readBtn.on('mousedown touchstart', function(e) {
                e.preventDefault();
                pressTimer = setTimeout(() => {
                    startSpeaking();
                }, 300);
            });

            // 结束长按
            $readBtn.on('mouseup mouseleave touchend', function() {
                clearTimeout(pressTimer);
                if (isSpeaking) {
                    stopSpeaking();
                    // 显示翻译区域
                    showTranslationText();
                }
            });

            function startSpeaking() {
                isSpeaking = true;
                $readBtn.addClass('speaking');
                
                // 获取翻译文本
                const translationText = $('.reference-translation').text();
                
                // 使用语音合成API朗读文本
                if ('speechSynthesis' in window) {
                    const utterance = new SpeechSynthesisUtterance(translationText);
                    utterance.lang = 'zh-CN';
                    utterance.rate = 1.0;
                    utterance.pitch = 1.0;
                    
                    utterance.onend = function() {
                        stopSpeaking();
                        // 朗读结束后也显示翻译文本
                        showTranslationText();
                    };
                    
                    speechSynthesis.speak(utterance);
                }
            }

            function stopSpeaking() {
                isSpeaking = false;
                $readBtn.removeClass('speaking');
                if ('speechSynthesis' in window) {
                    speechSynthesis.cancel();
                }
            }

            function showTranslationText() {
                // 创建或更新翻译文本显示区域
                let $translationDisplay = $('.translation-display');
                if ($translationDisplay.length === 0) {
                    $translationDisplay = $('<div class="translation-display"></div>');
                    $('.english-text').after($translationDisplay);
                }
                
                // 获取翻译文本并显示
                const translationText = $('.reference-translation').text();
                $translationDisplay.html(translationText);
                
                // 添加淡入动画
                $translationDisplay.hide().fadeIn(500);
            }

            // 显示解析按钮功能
            $('#aiAnalysis').click(function() {
                $(this).toggleClass('active');
                const $analysis = $('.translation-area');
                
                if ($analysis.hasClass('show')) {
                    $analysis.removeClass('show');
                    $(this).text('显示解析');
                } else {
                    $analysis.addClass('show');
                    $(this).text('AI解析');
                }
            });
        });
    </script>
</body>
</html>